<template>
  <div class="box">
    <!-- 3D粒子 -->
    <div class="box_li">
      <Li></Li>
    </div>
    <div class="left">
      <div class="left_groid">
        <div class="left_groid_top" style="color: aliceblue; line-height: 25px">
          <span style="margin-left: 10%">水电用量</span>
        </div>
        <div class="groid">
             <!-- 左上 -->
             <lefttop></lefttop>
        </div>
      </div>
      <div class="left_groid1">
        <div class="left_groid_top" style="color: aliceblue; line-height: 25px">
          <span style="margin-left: 10%">水电用量</span>
        </div>
        <div class="groid1">
               <!-- 门禁管理 -->
             <Leftcentco></Leftcentco>
        </div>
      </div>
      <div class="left_groid1">
        <div class="left_groid_top" style="color: aliceblue; line-height: 25px">
          <span style="margin-left: 10%">水电用量</span>
        </div>
        <div class="groid1">
            <!-- 列表 -->
            <Lb></Lb>
        </div>
      </div>
    </div>

    <div class="context">
      <!-- 3D教学楼 -->
      <Jxl></Jxl>
    </div>

    <div class="right">
      <div class="right_proid">
        <div
          class="right_proid_top"
          style="color: aliceblue; line-height: 33px"
        >
          <span style="margin-left: 10%">水电用量</span>
        </div>
        <!-- 视频 -->
        <Sp></Sp>
      </div>
      <div class="right_proid1">
        <div
          class="right_proid_top"
          style="color: aliceblue; line-height: 33px"
        >
          <span style="margin-left: 10%">水电用量</span>
        </div>
        <!-- 视频 -->
        <Sp></Sp>
      </div>
      <div class="right_proid1">
        <div
          class="right_proid_top"
          style="color: aliceblue; line-height: 33px"
        >
          <span style="margin-left: 10%">水电用量</span>
        </div>
        <!-- 视频 -->
        <Sp></Sp>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Li from "@/components/Af/Li.vue";
import Sp from "@/components/Af/Sp.vue";
import Lb from "@/components/Af/Lb.vue";
import lefttop from "@/components/Af/lefttop.vue";
import Jxl from "@/components/Af/Jxl.vue";
</script>

<style scoped lang="scss">
.box_li {
  position: absolute;
  z-index: 777;
}
.box {
  position: relative;
  width: 100%;
  height: 100%;
  //   background: blue;
  display: flex;
  .left {
    width: 30%;
    height: 100%;
    background: url("../../public/image/Photo／背景／Left.png") no-repeat;
    background-size: 100% 100%;
     z-index: 999;
    .left_groid {
      width: 75%;
      height: 30%;
      margin-left: 55px;
      margin-top: 60px;
      // background: rgba(250, 247, 247, 0.2);
      // background: yellow;
      .groid {
        width: 100%;
        height: 80%;
        margin-top: 10px;
        background: rgba(250, 247, 247, 0.2);
        // background: magenta;
        // overflow: hidden;
        overflow-y: scroll;
      }
    }
    .left_groid1 {
      width: 75%;
      height: 25%;
      margin-left: 55px;
      margin-top: 20px;
      // background: rgba(250, 247, 247, 0.2);
      .groid1 {
        width: 100%;
        height: 80%;
        margin-top: 10px;
        background: rgba(250, 247, 247, 0.2);
      }
    }
  }
  .left_groid_top {
    background: url("../../public/images/左.png") no-repeat;
    width: 100%;
    height: 10%;
    // background: red;
    background-size: 100% 100%;
  }
  .right_proid_top {
    background: url("../../public/images/右.png") no-repeat;
    width: 100%;
    height: 10%;
    // background: red;
    background-size: 100% 100%;
  }
  .context {
    flex: 1;
    height: 70%;
    // width: 90%;
    margin-top: 5%;
    // border: solid 1px #ccc;
    z-index: 999;
  }

  .right {
    width: 30%;
    height: 100%;
    background: url("../../public/image/Photo／背景／Right.png") no-repeat;
    background-size: 100% 100%;
    z-index: 9999;
    .right_proid {
      width: 75%;
      height: 30%;
      margin-left: 70px;
      margin-top: 60px;
      // background: rgba(250, 247, 247, 0.2);
      .proid {
        position: absolute;
        top: 6%;
        width: 100%;
        height: 80%;
        border-radius: 10%;
        margin-top: 10px;
        // background: rgba(250, 247, 247, 0.2);
      }
    }
    .right_proid1 {
      width: 75%;
      height: 25%;
      margin-left: 70px;
      margin-top: 20px;
      // background: rgba(250, 247, 247, 0.2);
    }
  }
}
</style>